<template>
  <div class="book-detail-box">
    <c-book-detail-related>
      <p slot="slot1" class="bookd-route">
        <router-link to="/">
          <span class="web-name">小说精品屋</span>&nbsp;>&nbsp;
        </router-link>
        <router-link :to="'/index/allBook?catId='+book.catId">
          <span class="cat-name">{{book.catName}}</span>&nbsp;>&nbsp;
        </router-link>
        <span class="bookdr-name">{{book.bookName}}</span>
      </p>

      <div slot="slot-pc" class="bookd-show">
        <div class="bookd-pic">
          <img :src="book.picUrl" alt="" class="bookdp-show">
        </div>
        <div class="bookd-cont">
          <p class="bookdc-name-author">
            <span class="bookdc-name">{{book.bookName}}</span>
            <span class="bookdc-author">{{book.authorName}}&nbsp;著</span>
          </p>
          <p class="bookdc-attr">
            <span class="bookdc-cat">类别：{{book.catName}}</span>
            <span class="bookdc-state">状态：{{book.bookStatus==0?'连载中':'已完结'}}</span>
            <span class="bookdc-click">总点击：{{book.visitCount}}</span>
            <span class="bookdc-words">总字数：{{book.wordCount}}</span>
          </p>
          <div :class="['bookdc-intro', showIntroAll?'':'bookdc-intro-part']" v-html="book.bookDesc"></div>
          <p class="bookdc-intro-extend">
            <span class="bookdci-icon-text" @click="showIntroAll = !showIntroAll">
              <i :class="['bookdci-icon', showIntroAll?'bookdci-icon-hide':'bookdci-icon-show']"></i>
              {{showIntroAll?'收起':'展开'}}
            </span>
          </p>
          <p class="bookdc-operation">
            <span class="bookdc-read" v-if="book.lastIndexId">点击阅读</span>
            <span class="bookdc-btn" @click="addToBookShelf()">{{isInShelf?'已在书架':'加入书架'}}</span>
            <span class="bookdc-btn" @click="addToBlacklist()">{{isInBlacklist?'已在黑名单':'加入黑名单'}}</span>
          </p>
        </div>
      </div>

      <div slot="slot-mobile" class="bookd-show">
        <div class="bookd-pic">
          <img :src="book.picUrl" alt="" class="bookdp-show">
        </div>
        <div class="bookd-cont">
          <p class="bookdc-name-author">
            <span class="bookdc-name">{{book.bookName}}</span>
            <span class="bookdc-author">{{book.authorName}}&nbsp;著</span>
          </p>
          <p class="bookdc-attr">
            <span class="bookdc-cat">类别：{{book.catName}}</span>
            <span class="bookdc-state">状态：{{book.bookStatus==0?'连载中':'已完结'}}</span>
            <span class="bookdc-click">总点击：{{book.visitCount}}</span>
            <span class="bookdc-words">总字数：{{book.wordCount}}</span>
          </p>
        </div>
        <div :class="['bookdc-intro', showIntroAll?'':'bookdc-intro-part']" v-html="book.bookDesc"></div>
        <p class="bookdc-intro-extend">
          <span class="bookdci-icon-text" @click="showIntroAll = !showIntroAll">
            <i :class="['bookdci-icon', showIntroAll?'bookdci-icon-hide':'bookdci-icon-show']"></i>
            {{showIntroAll?'收起':'展开'}}
          </span>
        </p>
        <p class="bookdc-operation">
          <span class="bookdc-read" v-if="book.lastIndexId">点击阅读</span>
          <span class="bookdc-btn" @click="addToBookShelf()">{{isInShelf?'已在书架':'加入书架'}}</span>
          <span class="bookdc-btn" @click="addToBlacklist()">{{isInBlacklist?'已在黑名单':'加入黑名单'}}</span>
        </p>
      </div>

      <div slot="slot2" class="bookd-other">
        <div class="bookdo-chapter">
          <div class="bookdch-title-cont">
            <span class="bookdch-title">最新章节&nbsp;</span>
            <span class="bookdch-count">({{book.indexCount}}章)</span>
            <div class="bookdch-go">
              <span class="bookdch-go-resource a-span" @click="util.openUrl(book.remoteUrl)">跳转源站</span>
              <!-- <router-link :to="'/index/allBookIndex?id='+book.id"> -->
                <span class="bookdch-go-allchap" @click="goAllIndex()">全部目录</span>
              <!-- </router-link> -->
            </div>
          </div>
          <div class="bookdch-new-view">
            <p class="bookdchv-new">
              <span class="bookdchv-name">{{book.lastIndexName}}</span>
              <span class="bookdchv-uptime">更新时间：{{book.lastIndexUpdateTime | dateToyMdHms}}</span>
            </p>
            <div class="bookdchv-view" v-html="lastBookContent"></div>
          </div>
          <c-comment-list :bookId="id"/>
        </div>
        <div class="bookdo-author-recom">
          <c-author-show :authorName="book.authorName"/>
          <div class="bookdo-recom">
            <p class="bookdor-title">同类推荐</p>
            <div class="bookdor-item" v-for="item in recCat" :key="item.id">
              <!-- <router-link :to="'/index/bookDetail?id='+item.id" :target="global.goBookDetailType"> -->
              <!-- <a :href="'#/index/bookDetail?id='+item.id" :target="global.goBookDetailType"> -->
              <span class="a-span" @click="util.goAnother(global, '/index/bookDetail?id='+item.id)">
                <img :src="item.picUrl" alt="" class="bookori-pic">
                <div class="bookdori-right">
                  <p class="bookdori-title">{{item.bookName}}</p>
                  <div class="bookdori-desc" v-html="item.bookDesc"></div>
                </div>
              </span>
              <!-- </a> -->
              <!-- </router-link> -->
            </div>
          </div>
        </div>
      </div>
    </c-book-detail-related>
  </div>
</template>

<script>
import cBookDetailRelated from './BookDetail_related.vue'
import cCommentList from '../../components/index/book/CommentList.vue';
import cAuthorShow from '../../components/index/book/AuthorShow.vue';

export default {
  components:{
    cBookDetailRelated,
    cCommentList, cAuthorShow
  },
  data(){
    return {
      id:this.$route.query.id,
      book:{},
      firstBookIndexId:null,
      lastBookContent:null,
      isInShelf:false,
      isInBlacklist:false,
      recCat:[],
      showIntroAll:true,
      commentCont:''
    }
  },
  created() {
    this.init();
  },
  methods:{
    init(){
      this.getBookDetail();
      this.queryIsInShelf();
      this.queryIsInBlacklist();
      this.addVisitCount();
    },
    getBookDetail(){
      this.$http.postForm('/pageJson/bookDetail', {bookId:this.id}, res => {
        this.book = res.book;
        this.firstBookIndexId = res.firstBookIndexId;
        this.queryBookIndexAbout();
        this.listRecBookByCatId();
      });
    },
    queryBookIndexAbout(){
      if(this.book.lastIndexId == null){
        return;
      }
      this.$http.postForm('/book/queryBookIndexAbout', {bookId:this.id,lastBookIndexId:this.book.lastIndexId}, res=>{
        this.lastBookContent = res.lastBookContent;
      })
    },
    queryIsInShelf(){
      this.$http.postForm('/user/queryIsInShelf', {bookId:this.id}, res=>{
        this.isInShelf = res;
      }, function(){
        // console.log("no login...");
      })
    },
    addToBookShelf(){
      if(this.isInShelf){
        this.$http.postForm('/user/removeFromBookShelf', {bookId:this.id}, res=>{
          this.isInShelf = false;
        });
      }else{
        this.$http.postForm('/user/addToBookShelf', {bookId:this.id}, res=>{
          this.isInShelf = true;
        });
      }
    },
    queryIsInBlacklist(){
      this.$http.postForm('/user/queryIsInBlacklist', {bookId:this.id}, res=>{
        this.isInBlacklist = res;
      }, function(){
        // console.log("no login...");
      })
    },
    addToBlacklist(){
      if(this.isInBlacklist){
        this.$http.postForm('/user/removeFromBlacklist', {bookId:this.id}, res=>{
          this.isInBlacklist = false;
        });
      }else{
        this.$http.postForm('/user/addToBlacklist', {bookId:this.id}, res=>{
          this.isInBlacklist = true;
        });
      }
    },
    listRecBookByCatId(){
      if(this.book.catId == null){
        return;
      }
      this.$http.postForm('/book/listRecBookByCatId', {catId:this.book.catId}, res=>{
        this.recCat = res;
      })
    },
    goAllIndex(){
      if(this.book.lastIndexId != null){
        this.$router.push('/index/allBookIndex?id='+this.id);
      }else{
        this.$message('本地未存储章节内容，可跳转源站。');
      }
    },
    addVisitCount(){
      this.$http.postForm('/book/addVisitCount', {bookId:this.id});
    }
    // goAnother(item){
    //   if(this.global.goBookDetailType == "_blank"){
    //     window.open(this.$router.resolve('/index/bookDetail?id='+item.id).href, '_blank');
    //   }else{
    //     // location.href='#/index/bookDetail?id='+item.id;
    //     this.$router.push('/index/bookDetail?id='+item.id);
    //   //  前进返回不刷新
    //     location.reload();
    //   }
    // }
  },
  watch:{
    "$route.query.id": function(){
      this.id = this.$route.query.id;
      this.init();
    }
  }
}
</script>

<style lang='scss' scoped>
</style>